<template>
  <div class="header-container">
    <div class="header-inner" :style="headerWidth">
      <!-- 顶部 -->
      <div class="top">
        <span
          class="el-icon-s-fold"
          v-if="!isCollapse"
          @click="changeCollapse(true)"
        ></span>
        <span
          class="el-icon-s-unfold"
          v-else
          @click="changeCollapse(false)"
        ></span>

        <!-- 右侧用户 -->
        <div class="user">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              {{ userInfo.username }}
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="userLogout">
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <img class="avatar" src="../assets/avatar.jpg" alt="" />
        </div>
        <!-- 颜色选择器 -->
        <el-dropdown class="color-group" trigger="click">
          <span class="el-dropdown-link">
            <i
              class="iconfont icon-youqitong_huaban1"
              :style="{ color: theme.color }"
            ></i>
            <i class="el-icon-caret-bottom"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(color, index) in colorGroup"
              :key="index"
              @click.native="CHANGE_THEME(color)"
            >
              <div class="color-item">
                <span :class="['iconfont', color.icon]"></span>
                <span
                  class="circle"
                  :style="{ 'background-color': color.color }"
                ></span>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- 是否全屏 -->
        <div class="screen">
          <el-tooltip
            effect="dark"
            content="全屏"
            placement="bottom"
            v-if="!isFullScreen"
          >
            <span
              class="full-screen iconfont icon-quanping"
              @click="fullScreen"
            ></span>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="退出全屏"
            placement="bottom"
            v-else
          >
            <span
              class="quit-screen iconfont icon-tuichuquanping"
              @click="quitFullScreen"
            ></span>
          </el-tooltip>
        </div>
      </div>
      <!-- 底部标签页组件 -->
      <label-page></label-page>
    </div>
  </div>
</template>

<script>
import labelPage from '../components/label-page.vue'
import { removeStorage } from '../utils/auth'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'my-header',
  data() {
    return {
      isCollapse: false,
      isFullScreen: false, // 是否全屏
      // 颜色选择器
      colorGroup: [
        {
          icon: 'icon-icon_xiaolian-mian',
          color: '#2d8cf0',
        },
        {
          icon: 'icon-icon_xiaolian-mian',
          color: '#f04134',
        },
        {
          icon: 'icon-icon_xiaolian-mian',
          color: '#00a854',
        },
        {
          icon: 'icon-icon_xiaolian-xian',
          color: '#2d8cf0',
        },
        {
          icon: 'icon-icon_xiaolian-xian',
          color: '#f04134',
        },
        {
          icon: 'icon-icon_xiaolian-xian',
          color: '#00a854',
        },
      ],
    }
  },
  methods: {
    ...mapMutations('theme', ['CHANGE_THEME']),
    // 点击菜单折叠、展开事件
    changeCollapse(flag) {
      this.isCollapse = flag
      this.$bus.$emit('changeCollapse', flag)
    },
    // 用户退出登录
    userLogout() {
      removeStorage('userInfo')
      removeStorage('pageList')
      this.$message.success('成功退出登录')
      this.$router.push('/login')
    },
    //实现全屏
    fullScreen() {
      this.isFullScreen = true
      // documentElement 属性以一个元素对象返回一个文档的文档元素
      const el = document.documentElement
      el.requestFullscreen ||
      el.mozRequestFullScreen ||
      el.webkitRequestFullscreen ||
      el.msRequestFullScreen
        ? el.requestFullscreen() ||
          el.mozRequestFullScreen() ||
          el.webkitRequestFullscreen() ||
          el.msRequestFullscreen()
        : null
    },
    // 退出全屏
    quitFullScreen() {
      this.isFullScreen = false
      // 浏览器兼容
      const exitMethod =
        document.cancelFullScreen ||
        document.webkitCancelFullScreen ||
        document.mozCancelFullScreen ||
        document.exitFullScreen
      if (exitMethod) {
        exitMethod.call(document)
      } else if (typeof window.ActiveXObject !== 'undefined') {
        const wscript = new ActiveXObject('WScript.Shell')
        if (wscript != null) {
          wscript.SendKeys('{F11}')
        }
      }
    },
  },
  computed: {
    ...mapState('theme', ['theme']),
    ...mapState('user', ['userInfo']),

    // 头部宽度
    headerWidth() {
      return { width: `calc(100% - ${this.isCollapse ? '64px' : '240px'})` }
    },
  },
  components: {
    labelPage,
  },
  created() {
    // window.addEventListener('resize', () => {
    //   if (!this.isFullScreen) {
    //     console.log(123)
    //     this.isFullScreen = false
    //   } else {
    //     console.log(456)
    //     this.isFullScreen = true
    //   }
    // })
  },
}
</script>

<style lang="scss" scoped>
.header-container {
  width: 100%;
  height: 90px;
  .header-inner {
    position: fixed;
    top: 0;
    right: 0;
    width: calc(100% - 240px);
    height: 90px;
    z-index: 99;
    background-color: #fff;
    .top {
      height: 45px;
      & > span {
        font-size: 24px;
        margin-left: 12px;
        line-height: 45px;
        cursor: pointer;
      }
      .color-group,
      .user {
        float: right;
      }
      .color-group {
        margin-right: 12px;
        height: 100%;
        line-height: 45px;
        font-size: 18px;
        .iconfont {
          font-size: 20px;
        }
      }
    }

    .user {
      height: 100%;
      line-height: 45px;
      margin: 0 12px;
      .el-dropdown {
        vertical-align: top;
      }
      .avatar {
        margin-top: 6px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
      }
    }

    .screen {
      float: right;
      margin-right: 20px;
      line-height: 45px;
      font-weight: 800;
      cursor: pointer;
    }
  }
}
.circle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-left: 6px;
}

.color-item {
  position: relative;
  width: 45px;
  height: 30px;
  line-height: 30px;
}
.el-dropdown {
  cursor: pointer;
}
</style>
